<div class="z-[-2000] fixed w-full h-full" id="BG_contianer">
  <div class="w-full h-full absolute top-0 left-0 bg-black/50 md:bg-black/30">
  </div>
</div>

<script>
  import render3DScene from "../three/render3DScene";
  import PDC_Depth from "../assets/PDCIndex_depth.jpg";
  const BG_contianer = window.document.querySelector(
    "#BG_contianer",
  ) as HTMLElement;
  try {
    render3DScene(BG_contianer, "/bg/PDCIndex.jpg", PDC_Depth.src);
  } catch (e) {
    console.log(e);
    const img = document.createElement("img");
    img.src = "/bg/PDCIndex.jpg";
    img.alt = "background";
    img.className =
      "max-w-none h-[120%] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
    BG_contianer.appendChild(img);
  }
</script>
